<template>
  <div class="home">
    <header class="header">
      <h1>母校行活动</h1>
    </header>
    <main class="main-content">
      <section class="intro">
        <h2>活动简介</h2>
        <p>母校行活动是一年一度的校友盛会，旨在促进校友之间的交流与合作，
          同时为在校学生提供宝贵的学习与成长机会。活动内容丰富多样，包括
          学术讲座、职业发展研讨会、文化娱乐活动等。通过参与这些活动，校
          友们不仅能够重温校园生活，还能与昔日同窗重聚，分享彼此的人生经
          历和职业成就。此外，活动也为在校学生提供了与前辈交流的平台，帮
          助他们更好地规划未来。母校行活动不仅是一次情感的重聚，更是一次
          智慧的碰撞和心灵的洗礼。</p>
      </section>
      <section class="photos">
        <h4>精彩瞬间</h4>
        <div class="photo-grid">
          <img src="../../assets/one.jpg" alt="活力" />
          <img src="../../assets/two.jpg" alt="多彩" />
          <img src="../../assets/four.jpg" alt="快乐" />
          <img src="../../assets/three.jpg" alt="激情" />
        </div>
      </section>
      <section class="schedule">
        <h5>开放时间</h5>
        <p>每年春季和秋季，具体时间请关注学校公告。</p>
      </section>
    </main>
  </div>
</template>

<style scoped>
.home {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-image: url('../../assets/seven.jpg'); /* 更改背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
}

.header {
  background-color: transparent; /* 去掉背景颜色 */
  color: white;
  padding: 20px;
  margin-left: 20px; /* 向左移动标题 */
}

.main-content {
  padding: 20px;
}

.intro, .schedule, .photos {
  margin-bottom: 40px;
}

.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* 增加图片间距 */
}

.photo-grid img {
  width: 250px; /* 放大图片 */
  height: auto;
  border-radius: 8px;
}
</style>
<script setup lang="ts">
</script>